<template>
	<div class="student">
		<h2>我是Student组件，一共有{{total}}个学生</h2>
		<input type="text" placeholder="输入姓刘的学生" v-model="name">
		<button @click="addStudent">添加一个人</button>
		<ul>
			<li v-for="stu in list" :key="stu.id">{{stu.name}}</li>
		</ul>
	</div>
</template>

<script>
	import {mapState,mapGetters,mapActions} from 'vuex'
	export default {
		name:'Student',
		data() {
			return {
				name:''
			}
		},
		computed: {
			...mapState('xuesheng',['list']),
			...mapGetters('xuesheng',['total'])
		},
		methods: {
			...mapActions('xuesheng',['jia']),

			addStudent(){
				//触发action
				this.jia({id:Date.now(),name:this.name})
				//清空输入
				this.name = ''
			}
		},
	}
</script>

<style scoped>
	.student{
		background-color: skyblue;
		padding: 20px;
	}
</style>